<template>
    <div style="margin: 46px 4px">
        <loading v-if="!isReady"></loading>
        <nav-bar :head="head"></nav-bar>
        <div class="main">
            <div class="product_detail van-hairline--bottom">
                <div class="left-content">
                    <van-image :src="detail.product_image" radius="0.35rem" width="10rem" height="10rem">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                </div>
                <div class="right-content">
                    <p class="product_name">{{ detail.product_name }}</p>
                    <p style="color: #808080;font-size: 14px;">原始售价： <span class="old-price">${{ detail.price }} {{ detail.coin }}</span></p>
                    <p class="new-price">限时优惠： ${{ detail.discount_price }} {{ detail.coin }}</p>
                </div>
            </div>

            <!--  购买流程  -->
            <div class="van-hairline--bottom description">
                <p v-html="detail.purchase_notice"></p>
            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" @click="showWX" />
            <van-goods-action-icon :icon="icon" :text="icon_text" color="#ff5000" @click="collection" />
            <van-goods-action-button type="danger" color="linear-gradient(to right,#f17102,#f1a42a )" text="立即购买" @click="order" />
        </van-goods-action>
    </div>
</template>

<script>
import Vue from 'vue';
import {
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton
} from 'vant';
import { Dialog } from 'vant';

Vue
    .use(GoodsAction)
    .use(GoodsActionIcon)
    .use(GoodsActionButton)
    .use(Dialog);
export default {
    name: "product-detail",
    data() {
      return {
          head:'商品详情',
          productId: '',
          detail:{},
          isReady: false,
          icon: '',
          icon_text: ''
      }
    },
    created() {
        this.onLoad();
    },
    methods: {
        showWX: function () {
            Dialog.alert({
                message: '请添加我们的客服微信：liuwei123',
            }).then(() => {
                // on close
            });
        },
        order: function () {
            this.$router.push({name:'order',params:{product:this.detail}})
        },
        collection: function(){
            var this_ = this;
            if (!this_.detail.has_collection){
                var userInfo = JSON.parse(localStorage.getItem('userInfo'));
                var data = {
                    'product_id' : this_.productId,
                    'user_id': userInfo.id
                };
                this_.$api.main.Collection(data).then(res => {
                    if (res.data.success){
                        this_.detail.has_collection = true;
                        this_.icon = 'star';
                        this_.icon_text = '已收藏';
                    }else {
                        this_.icon = 'star-o';
                        this_.icon_text = '未收藏';
                    }
                })
            }
        },
        onLoad: function () {
            var this_ = this;
            if (this_.$route.params.product_id){
                this_.productId = this_.$route.params.product_id;
                localStorage.setItem('current_product_id',this_.$route.params.product_id)
            }else {
                this_.productId = localStorage.getItem('current_product_id')
            }
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            var data = {
                'product_id' : this_.productId,
                'user_id': userInfo.id
            };
            this_.$api.main.ProductDetail(data).then(res => {
                if (res.data.success){
                    this_.detail = res.data.data;
                    this_.isReady = true;
                    if(res.data.data.has_collection){
                        this_.icon = 'star';
                        this_.icon_text = '已收藏';
                    }else {
                        this_.icon = 'star-o';
                        this_.icon_text = '未收藏';
                    }
                }else {
                    this_.$router.replace('/');
                }
            })
        }
    }
}
</script>

<style scoped>
    .description{
        padding: 0.5rem 0.8rem;
    }
    .description h4{
        margin: 5px 0;
    }
    .description p{
        font-size: 14px;
        color: #808080;
    }
    .main{
        background: #ffffff87;
    }
    .left-content{
        background: none;
        height: 100%;
    }
    .right-content{
        margin-left: 12px;
        margin-top: 12px;
    }
    .product_detail{
        display: flex;
        justify-content: flex-start;
        margin: 15px;
    }
    .product_name{
        font-size: 15px;
        font-weight: bold;
    }
    .old-price{
        text-decoration:line-through;
        color: #808080;
        font-size: 14px;
    }
    .new-price{
        color: red;
        font-size: 14px;
    }
</style>
